<template>
  <div>
    <el-form class="left">
      <el-form-item label="中心频率">
        <el-input v-model="form.centerFreqIn" type="number" @change="datachangeFun('centerFreqIn')">
          <template #append>
            <el-select v-model="selectform.centerFreqIn" @change="unitChange('centerFreqIn')">
              <el-option v-for="unit in units" :key="unit" :value="unit" />
            </el-select>
          </template>
        </el-input>
        <el-button type="primary" style="position:absolute;right:-85px;" @click="monitor">
          监测
        </el-button>
      </el-form-item>

      <el-form-item label="扫宽">
        <el-input v-model="form.scanWidth" type="number" @change="datachangeFun('scanWidth')">
          <template #append>
            <el-select v-model="selectform.scanWidth" @change="unitChange('scanWidth')">
              <el-option v-for="unit in units" :key="unit" :value="unit" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="起始频率">
        <el-input v-model="form.startFre" type="number" @change="datachangeFun('startFre')">
          <template #append>
            <el-select v-model="selectform.startFre" @change="unitChange('startFre')">
              <el-option v-for="unit in units" :key="unit" :value="unit" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="终止频率">
        <el-input v-model="form.endFre" type="number" @change="datachangeFun('endFre')">
          <template #append>
            <el-select v-model="selectform.endFre" @change="unitChange('endFre')">
              <el-option v-for="unit in units" :key="unit" :value="unit" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="步长">
        <el-input v-model="form.stepLength" type="number" @change="datachangeFun('stepLength')">
          <template #append>
            <el-select v-model="selectform.stepLength" @change="unitChange('stepLength')">
              <el-option v-for="unit in units" :key="unit" :value="unit" />
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="频个数">
        <el-input v-model="form.freNum" type="number" @change="datachangeFun('freNum')">
          <template #append>
            <span class="pl-1 pr-1">个</span>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import useScanStore from '@/store/modules/scanMonitor';
import { numToPlot, plotToNum } from '@/utils/utils';
import { update } from '@/utils/instance'

const scanStore = useScanStore()
const form = ref({ ...scanStore.spectrum })
const selectform = ref({
  centerFreqIn: 'Hz',
  scanWidth: 'Hz',
  startFre: 'Hz',
  endFre: 'Hz',
  stepLength: 'Hz',
})
const units = [
  'GHz',
  'MHz',
  'KHz',
  'Hz',
]
const datachangeFun = (key) => {
  if (key) {
    scanStore.spectrum[key] = plotToNum(form.value[key] + selectform.value[key])
    formmatValue(key, form.value[key])
    linkage(key)
    return
  }
  Object.keys(form.value).forEach(key => {
    formmatValue(key, scanStore.spectrum[key])
  })
}
const unitChange = (key) => {
  datachangeFun(key)
}
const linkage = (key) => {
  const freStore = scanStore.spectrum
  if (key === 'centerFreqIn' || key === 'scanWidth') {
    freStore.startFre = freStore.centerFreqIn * 1 - freStore.scanWidth / 2 * 1
    freStore.endFre = freStore.centerFreqIn * 1 + freStore.scanWidth / 2 * 1
    formmatValue('startFre', freStore.startFre)
    formmatValue('endFre', freStore.endFre)
  }
  if (key === 'startFre' || key === 'endFre') {
    freStore.scanWidth = freStore.endFre * 1 - freStore.startFre * 1
    freStore.centerFreqIn = freStore.startFre * 1 + freStore.scanWidth / 2 * 1
    formmatValue('centerFreqIn', freStore.centerFreqIn)
    formmatValue('scanWidth', freStore.scanWidth)
  }
}
const formmatValue = (key, value) => {
  const newFormVal = numToPlot(value)
  if (newFormVal.search("KHz") != -1) {
    form.value[key] = newFormVal.replace('KHz', '')
    selectform.value[key] = 'KHz'
  } else if (newFormVal.search("MHz") != -1) {
    form.value[key] = newFormVal.replace('MHz', '')
    selectform.value[key] = 'MHz'
  } else if (newFormVal.search("GHz") != -1) {
    form.value[key] = newFormVal.replace('GHz', '')
    selectform.value[key] = 'GHz'
  }
}
const getXlabelFormat = (showNum, spectrum) => {
  const left = spectrum.centerFreqIn - spectrum.scanWidth / 2
  return function () {
    const val = (this.value / (showNum - 1)) * spectrum.scanWidth + left
    return numToPlot(val)
  }
}
const monitor = () => {
  update('xAxis.labels.formatter', getXlabelFormat(scanStore.resultLen, scanStore.spectrum))
}

onMounted(() => {
  datachangeFun()
})
</script>
<style scoped></style>